{% extends "view/home/inc_baseNew.html" %}
{% block style%}
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link href="/static/assets/city-picker/css/city-picker.css" rel="stylesheet">
<script src="/static/admin/js/jquery.min.js"></script>
<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css" type="text/css">
<script src="/static/admin/js/webuploader/webuploader.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/admin/js/chosen/chosen.css" type="text/css" />
<link rel="stylesheet" href="/static/assets/bootstrap-select/css/bootstrap-select.min.css">


{% endblock %}
{% block content %}
{%set cate = category.id|get_cate()%}
{%if category.pid !=0%}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}
<!-- 
PAGE HEADER 

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<style>
div.shop-item {
    margin-bottom: 0;
}
.shop-item-diqu{
    text-align: left;
}
.ivu-tag-blue {
    line-height: 20px;
    background: #e6f7ff;
    border-color: #91d5ff;
}
.ivu-tag {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #1374d4;
    border-radius: 10px;
    background: #f7f7f7;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
}
.ivu-tag-blue .ivu-tag-text {
    color: #1890ff!important;
}
.shop-item-info{
    display: flex;
    justify-content: space-between;
}
.panel-default {
    border-color: #ddd;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
}
.shop-item-image{
    padding: 10px 10px 0 10px;
}
div.shop-item-summary{
    padding-top:0;
}
div.shop-item-summary h2{
    font-size: 17px;
}
div.shop-item-price{
    font-size: 20px;
    font-weight: initial;
    margin: 6px;
}
div.shop-item-price span{
    color: #ed1a24!important;
    font-weight: lighter;
    padding:0 0 0 2px;
}
div.shop-item-shuliang {
    font-size: 15px;
    font-weight: lighter;
    border-top: 1px solid #9999991a;
}
@media (min-width: 992px){
    .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-lg-10 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
}
.col-lg-2 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
}
.panel-tuijian{
    margin: 0;
    border: 1px solid #9999991a;
}
.guadan-title {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 25px;
    color: inherit;
    height: 60px;
    line-height: 60px;
    text-align: left;
}
.btn-primary {
    border-radius:0;
}
.btn-fabu{
    margin-top:20px;
    height: 70px;
    line-height: 70px;
}
.btn-shaixuan{
    margin-top:20px;
    height: 50px;
    line-height: 50px; 
    display:flex; 
    padding:0 20px;
    justify-content: space-between;
}
.filter-btn{
    margin-left: 50px;
}
table {
    background-color: #fff;
    font-family: "Segoe UI","Microsoft Yahei",arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    /* font-size: 1rem; */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align:initial;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}
table .btn {
    margin: 0 3px;
}
.btn {
    position: relative;
}
.btn-sm, .btn-xs, .btn-lg, .btn-xlg {
    height: auto;
    font-size: inherit;
}
.relative {
    position: relative;
}
.btn-group-xs>.btn, .btn-xs {
    /* padding: 1px 5px; */
    line-height: 1.5;
    border-radius: 3px;
}
.btn-danger {
    color: #fff;
    background-color: #ed1a24;
    border-color: #d43f3a;
}
.container{
    font-size: 14px;
}
.city-picker-span{
    color: #495057;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    border-bottom:0;
    border-radius:3px;
    padding: 0 .5rem;
}
.city-picker-span > .placeholder{
    color: #495057;
}
.filter-option-inner-inner{
    color: #495057;
}
.city-picker-span > .title > span{
    color: #495057;
    padding:0;
}
.city-select-wrap .city-select a.active{
    color: #fff;
    background-color: #ed1a24;
}
.city-select-tab > a.active{
    color: #000;
}
.city-picker-span > .title > span:hover {
    color: #fff;
    background-color: #ed1a24;
}
.guadan-title ~ p,.xinxifabu > p{
    border-left: 5px solid #ed1a24;
    padding-left: 5px;
    height: 25px;
    line-height: 25px;
    background-color: #f4f4f4;
    margin: 5px 0;
}

.row > span:before {
    content: '*';
    font-weight: 700;
    color: #f00;
    margin-right: 5px;
}
.row > span.norequired:before {
    content:'';
}
.xinxifabu .row{
    margin-top: 10px;
    margin-bottom: 10px;
}
#uploader{
    margin-left: 15px;
}
.margin-left15{
    margin-left: 15px;
}
.dropdown-menu{
    font-size: .875rem;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    max-height: 300px;
    overflow: auto;
}

/* .dropdown-submenu:hover>.dropdown-menu {
    display: block;
} */

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

/* .dropdown-submenu:hover>a:after {
    border-left-color: #fff;
} */

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.city-picker-dropdown{
    margin-left: 15px;
}
li.active,li:active,.dropdown-item.active,.dropdown-item:active,.dropdown-submenu.active,.dropdown-submenu:active,.dropdown-item:focus {
    color:#fff;
    background-color: #ed1a24;
}
.active >a{
    color:#fff;
}
.btn-fabu .btn{
    width:120px;
}
.city-picker-span{
    display: inline-flex;
    align-items: center;
}
.city-picker-span.dropdown-toggle::after{
    margin-top: -1px;
    margin-left: auto;
}
</style>
<section class="page-header page-header-xs" >
    <img src="/static/assets_new/img/banner/xinxifabu_banner.png" alt="">
</section>
<!-- /PAGE HEADER -->




<!-- -->
<section>
    <div class="container">
        <div class="row">
            <div class="col" style="padding:0 80px;margin-top: -80px;margin-bottom: 80px;background-color: white;">
                <p class="guadan-title">{{mokuaibiaoshi|getxiadantitle}}</p>
                <p>对方信息</p>
                <form method="post"  class="form-charen" action="/charen" data-validate="parsley">
                    {% if controller.get("mokuaibiaoshi")%}
                    <input type="hidden" name="mokuaibiaoshi" required  value="{{controller.get("mokuaibiaoshi")}}">
                    {%endif%}
                    <div class="row" style="margin-top: 15px;">
                            <div class="col-2">
                                <input type="text" onKeyUp="this.value=this.value.replace(/(^0+)|[^\.\d]/g,'');this.value=this.value.replace('.','');" name="query" class="form-control form-control-sm mb-2"  placeholder="请输入电话号码" required>
                            </div>
                            <div class="col-1">
                                <button class="btn btn-primary btn-sm no-refresh col" id="charen" type="submit" target-form="form-charen">确定</button>
                            </div>
                    </div>
                </form>
                <form method="post" class="form-horizontal xinxifabu" action="/xiadan" data-validate="parsley">
                <div class="row">
                        <span class="col-6">
                            公司(商户)名称
                        </span>
                        <span class="col-2">
                                联系人
                        </span>
                        <span class="col-4">
                            联系电话
                        </span>
                </div>
                <input type="text" name="duifangid" required style="opacity: 0;position: absolute;" readonly required>
                <input type="text" name="mokuaibiaoshi" style="opacity: 0;position: absolute;" readonly value="{{mokuaibiaoshi}}">
                <div class="row">
                    <div class="col-6">
                        <input type="text" name="duifanggsmc" class="form-control form-control-sm mb-2" readonly  required >
                    </div>   
                    <div class="col-2">
                        <input type="text" name="duifangrealname" class="form-control form-control-sm mb-2" readonly  required >    
                    </div>
                    <div class="col-4">
                        <input type="text" name="duifangmobile" class="form-control form-control-sm mb-2" readonly required >    
                    </div>                            
                </div>
                <p>订单信息</p>
                
                    <div class="row">
                            <span class="col-2">
                                    信息类型
                                </span>
                                <span class="col-8">
                                        信息标题
                                </span>
                    </div>
                    <div class="row">
                            <div class="col-2">
                                    <select class="form-control form-control-sm" name="yewuleixing" required>
                                            <option value="" style="display: none">请选择</option>
                                            <option value="0">我是供方</option>
                                            <option value="1">我是需方</option>
                                    </select>
                            </div>   
                            
                            <div class="col-8 ">
                                    <input type="text" name="xinxibiaoti" class="form-control form-control-sm mb-2"  readonly value="{{mokuaibiaoshi|getxiadantitle}}" required>
                            </div>
                                    
                    </div>
                    <div class="row"> 
                            <span class="col-2">商品类别</span><span class="col-2">商品价格(元/吨)</span><span class="col-2">预计数量(吨)</span><span class="col-2">预计货款(元)</span><span class="col-2">发票税率(%)</span> {% if controller.get('mokuaibiaoshi') !=2 %}<span class="col-2">付款比例(%)</span>{%endif%}
                    </div>
                    <div  class="row">
                            <div class="col-2 ">
                            <input type="text" name="shangpingleibie" required style="opacity: 0;position: absolute;">
                            <div class="dropdown bootstrap-select form-control form-control-sm">
                                    <button class="btn btn-light btn-sm dropdown-toggle filter-option-inner-inner" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            请选择
                                    </button>
                                    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                                            {%for v in fenglei %}                                    
                                            {% if v.children.length>0%}
                                            <li class="dropdown-submenu">
                                                    <a class="dropdown-item" href="javascript:;"  data="{{v.label}}">{{v.label}}</a>
                                                    <ul class="dropdown-menu">
                                                        {%for _v in v.children %}
                                                        <li ><a class="dropdown-item" href="javascript:;" data="{{v.label+'-'+_v.label}}">{{_v.label}}</a></li>
                                                        {%endfor%}
                                                    </ul>
                                                </li>
                                            {%else%}
                                            <li class="dropdown-item"><a href="javascript:;" data="{{v.label}}">{{v.label}}</a></li>
                                            {%endif%}
                                            {%endfor%}
                                    </ul>
                            </div>

                            </div>
                            <div class="col-2 ">
                                <input type="text" onKeyUp="this.value=this.value.replace(/(^0+)|[^\.\d]/g,'');this.value=this.value.replace('.','');" name="jiage" class="form-control form-control-sm mb-2"  placeholder="请输入"  maxlength="5" required>
                            </div> 
                            <div class="col-2 ">
                                <input type="text" onKeyUp="this.value=this.value.replace(/(^0+)|[^\.\d]/g,'');this.value=this.value.replace('.','');" name="shangpingshuliang" class="form-control form-control-sm mb-2"  placeholder="请输入"  maxlength="5" required>
                            </div>
                            <div class="col-2 ">
                                <input type="number" name="zongjia" class="form-control form-control-sm mb-2"  placeholder="" required readonly>
                            </div>
                            <div class="col-2 ">
                                <select class="form-control form-control-sm" name="taxes" required>
                                        <option value="" style="display: none">请选择</option>
                                        <option value="0">{{0|get_taxes}}</option>
                                        <option value="1">{{1|get_taxes}}</option>
                                        <option value="2">{{2|get_taxes}}</option>
                                </select>
                            </div>
                            {% if controller.get('mokuaibiaoshi') !=2 %}
                            <div class="col-2">
                                <input type="text"  onKeyUp="this.value=this.value.replace(/(^0+)|[^\.\d]/g,'');this.value=this.value.replace('.','');"  name="persent" class="form-control form-control-sm mb-2"  placeholder="请输入" maxlength="2" required>
                            </div>   
                            {%endif%}                         
                    </div>
                    <div class="row">
                            <span class="col-2">所在地区</span><span class="col-9">详细位置</span>
                    </div>
                    <div class="row">
                            <div class="btn-group btn-xs col-2 " style="position:relative;">
                                <input type="text" name="diqu" style="opacity: 0;position: absolute;" required>
                                <input readonly type="text" data-toggle="city-picker" >
                            </div>
                            <div class="col-10 ">
                                <input type="text" name="suozaiweizhi" class="form-control form-control-sm mb-2"  placeholder="请输入" required>
                            </div>
                            
                    </div>
                    <div class="row">
                        <span class="col norequired">商品描述</span>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <textarea class="col" name="leirongmiaoshu" maxlength="60" style="padding: 5px; border: 1px solid #ced4da;border-radius: .2rem;min-height: 100px" placeholder="例如质量标准、含杂要求、质检扣罚等要求（限60字） "></textarea>
                        </div>
                    </div>
                    <p>图片信息</p>
                    <div class="row">
                        {{HOOKS@xinxiUpPics.icon|safe}}
                    </div>
                    <div class="panel panel-default btn-fabu">
                        <a class="btn btn-primary btn-s-md " href="/mod/order/index/queren" data-toggle="ajaxModal" target-form="form-horizontal">完成</a>
                    </div>
                </form>
            </div>

            </div>
        </div>
    </div>
</section>
<!-- / -->

{% endblock %}

{% block script%}
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="/static/assets/js/view/demo.shop.js"></script>
<script src="/static/assets/city-picker/js/city-picker.data.js"></script>
<script src="/static/assets/city-picker/js/city-picker.js"></script>
<!-- Latest compiled and minified JavaScript -->

<script>
$("input[name='shangpingshuliang']").on("blur",function () {
    var val = $(this).val();
    console.log('shangpingshuliang:',val);
    if(val&&$("input[name='jiage']").val()){
        $("input[name='zongjia']").val(val*$("input[name='jiage']").val())
    }else{
        $("input[name='zongjia']").val('')
    }
})
$("input[name='jiage']").on("blur",function () {
    var val = $(this).val();
    console.log('jiage:',val);
    if(val&&$("input[name='shangpingshuliang']").val()){
        $("input[name='zongjia']").val(val*$("input[name='shangpingshuliang']").val())
    }else{
        $("input[name='zongjia']").val('')
    }
})
$('#charen').on('click',function(){
    var target, query, form;
    var target_form = $(this).attr('target-form');
    var that = this;
    form = $('.' + target_form);
          // 表单验证
    if ($('.' + target_form + '[data-validate="parsley"]')) {
        $('.' + target_form + '[data-validate="parsley"]').parsley().validate();
        if ($('.' + target_form + '[data-validate="parsley"]').parsley().isValid() !== true) {
          return false;
        }
    }
    target = form.get(0).action;
    query = form.serialize();
    $(that).addClass('disabled').attr('autocomplete', 'off').prop('disabled', true);
    $.post(target, query, function(data) {
      if (data.errno == 0) {
        console.log(data)
        $('[name="duifanggsmc"]').val(data.data.gsmc);
        $('[name="duifangrealname"]').val(data.data.real_name);
        $('[name="duifangmobile"]').val(data.data.mobile);
        $('[name="duifangid"]').val(data.data.id);
        toastr.success(data.errmsg);
        setTimeout(function() {
          $(that).removeClass('disabled').prop('disabled', false);
          toastr.clear();
        }, 1500);
      } else {
        $('[name="duifanggsmc"]').val('');
        $('[name="duifangrealname"]').val('');
        $('[name="duifangmobile"]').val('');
        $('[name="duifangid"]').val('');
        $(that).removeClass('disabled').prop('disabled', false);
        toastr.error(data.errmsg);
      }
    }).fail(function() {
      toastr.error('系统出错，请重试');
      setTimeout(function() {
        $(that).removeClass('disabled').prop('disabled', false);
        toastr.clear();
      }, 1500);
    });
})

$('select').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
  // do something...
  console.log(e, clickedIndex, isSelected, previousValue)
});
$('.dropdown-submenu > a').on("click", function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show').find('li').removeClass('active');
    submenu.next('.dropdown-menu').addClass('show');
    // var value= $(this).attr('data')
    // console.log(value)
    // $('#dropdownMenu1').text(value)
    $(this).parents('li').addClass('active').siblings().removeClass('active');
    e.stopPropagation();
});

$('.dropdown').on("hidden.bs.dropdown", function() {
    // hide any open menus when parent closes
    //$('.dropdown-menu.show').removeClass('show');
});

$('.dropdown-submenu .dropdown-menu a.dropdown-item').on("click", function(e) {
    var value= $(this).attr('data')
    console.log(value)
    $('#dropdownMenu1').text(value)
    $('[name="shangpingleibie"]').val(value)
    $(this).parents('li').addClass('active').siblings().removeClass('active');
    //e.stopPropagation();
});

$('[data-toggle="city-picker"]').citypicker({
        responsive:true,
        placeholder: '请选择',
        level:'city'
})


$('[data-toggle="city-picker"]').on('cp:updated',function(e) {
    console.log('cp:updated',e.currentTarget.value)
    $('[data-toggle="city-picker"]').on('cp:close',function(e) {
        console.log('cp:close',e.currentTarget.value)
        if(e.currentTarget.value){
            var queryParams = $.getQueryParameters();
            delete queryParams.page
            queryParams.diqu = e.currentTarget.value
            $('[name="diqu"]').val(e.currentTarget.value)
            //window.location.href = location.pathname+'?'+quertString(queryParams)
        }
    })
})


</script>
{% endblock %}